<script>
import * as echarts from "echarts"; // 确保引入方式正确
import {getGardCount} from '@/api/charts'
export default {
  name: 'PieChart',
  data() {
    return {
      myChart: null, // 显式声明 myChart
      option: {
        title: {
          text: '单词难度分布统计',
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 20,
            fontWeight: 'bold'
          },
          subtextStyle: {
            color: '#999',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom',
          textStyle: {
            color: '#333',
            fontSize: 13
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        color: [
          '#FF6B6B',
          '#FFD93D',
          '#6BCB77',
          '#4D96FF',
          '#845EC2',
          '#FFC75F',
          '#F9F871',
          '#00C9A7'
        ],
        series: [
          {
            name: '玫瑰图',
            type: 'pie',
            radius: [40, 180],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.15)',
              shadowOffsetY: 5
            },
            label: {
              color: '#444',
              fontSize: 14,
              formatter: '{b}\n{d}%'
            },
            labelLine: {
              lineStyle: {
                color: '#ccc'
              },
              smooth: 0.3,
              length: 10,
              length2: 10
            },
            data: [
              { value: '', name: '简单' },
              { value: '', name: '中等' },
              { value: '', name: '困难' },
            ]
          }
        ]
      }

    }
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.main;
      if (!chartDom) return;

      // 销毁旧实例（避免重复初始化）
      if (this.myChart) {
        this.myChart.dispose();
      }

      // 初始化图表
      this.myChart = echarts.init(chartDom);
      this.myChart.setOption(this.option);

      // 监听窗口变化自动调整图表大小
      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },

    /**
     * 获取数据
     */
    getGardData() {
      getGardCount().then(res => {
        const data = res.data.data
        console.log(data)
        this.option.series[0].data[0].value = data.easy
        this.option.series[0].data[1].value = data.medium
        this.option.series[0].data[2].value = data.difficulty
        if (this.myChart) {
          this.myChart.setOption(this.option)
        }
      }).catch(err => {

      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  created() {
    this.getGardData()
  },
  beforeDestroy() {
    // 清理事件监听和图表实例
    window.removeEventListener('resize', this.handleResize);
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  }
};
</script>

<template>
  <div>
    <div class="pie" ref="main" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<style scoped>
/* 可选：确保容器有明确的高度 */

</style>
